<template>
  <div>
    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div>
    </div>
    <section class="products-page">
      <div class="container">
        {{ order.orderId }}
        <div class="payer pwd-payer">
          <h4>
            待支付金额：￥<strong>{{ amount }}</strong> 元
          </h4>
          <small></small>
          <small
            >我的余额：￥<strong>{{ balance }}</strong
            >元 <a href="#">立即充值</a></small
          >
          <form class="form-inline">
            <input
              type="password"
              class="form-control"
              v-model="password"
              placeholder="请输入支付密码："
            />
            <button type="button" class="btn btn-primary" @click="handlePay()">
              确认支付
            </button>
          </form>
        </div>
        <div class="payer init-payer">
          <p>您还未设置支付密码，请立即设置支付密码：</p>
          <div class="form-inline">
            <input
              type="password"
              class="form-control"
              placeholder="请输入初始的支付密码："
            />
            <button
              type="button"
              class="btn btn-primary"
              onclick="handleInitPaymentPassword()"
            >
              确认
            </button>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<style scoped>
.container {
  text-align: center;
}
.container h4 {
  margin-top: 50px;
}
.form-inline {
  display: block;
  margin: 20px auto;
}
.init-payer {
  display: none;
  margin: 0 auto;
}
</style>

<script>
/* eslint-disable */
import { create, getStorage, getOrder } from "@/api/order";
import { listWallet, initWallet, recharge, pay, getAmount } from "@/api/wallet";
// import router from "@/router/routers";

export default {
  name: "Payment",
  data() {
    return {
      order: {},
      amount: null,
      balance: null,
      password: null,
      uid: localStorage.getItem("UID"),
    };
  },
  watch: {},
  mounted() {
    console.log(this.$route.query.o);
    getOrder(this.$route.query.o).then((res) => {
      console.log(res);
      this.order = res;
      this.amount = this.order.paidAmount;
    });
    this.handleWallet();
  },
  methods: {
    handleWallet() {
      getAmount(this.uid).then((res) => {
        this.balance = res;
        console.log(res);
      });
    },
    handlePay() {
      console.log(this.uid, this.password, this.order.orderId);
      pay(this.uid, this.password, this.order.orderId).then((res) => {
        console.log(res);
        this.$message(res);
        if (res == "支付完成") {
          alert(res);
          location.href = "/index.html";
        } else if ((res = "订单已支付")) {
          alert(res);
          location.href = "/products.html";
        }
      });
    },
  },
};
</script>

